<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调知识图谱 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
        }
        .nav-item:hover {
            background-color: rgba(64, 158, 255, 0.1);
        }
        .active-nav {
            color: #409EFF;
            border-bottom: 2px solid #409EFF;
        }
        #graphContainer {
            width: 100%;
            height: 600px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-center h-16">
                    <!-- 左侧logo -->
                    <div class="flex items-center">
                        <img src="https://via.placeholder.com/40x40?text=消防" alt="Logo" class="h-10 w-10">
                        <span class="ml-2 text-xl font-bold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    
                    <!-- 中间导航菜单 -->
                    <nav class="hidden md:flex space-x-1">
                        <a href="index.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-search mr-1"></i> 检索
                        </a>
                        <a href="knowledge-graph.html" class="nav-item active-nav px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                        </a>
                        <a href="ai-search.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-brain mr-1"></i> AI检索功能
                        </a>
                        <a href="report-generator.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                        </a>
                        <a href="model-dashboard.html" class="nav-item px-3 py-4 text-gray-700 font-medium">
                            <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                        </a>
                    </nav>
                    
                    <!-- 右侧用户信息 -->
                    <div class="flex items-center space-x-4">
                        <a href="personal-center.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-user-circle"></i> 个人中心
                        </a>
                        <a href="login.html" class="text-gray-700 hover:text-blue-500">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                        <a href="register.html" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md">
                            <i class="fas fa-user-plus"></i> 注册
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主体内容区 -->
        <main class="container mx-auto px-4 py-6">
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-gray-800">火灾调查知识图谱</h1>
                <p class="text-gray-600 mt-2">可视化展示火灾调查相关知识的关联关系，支持交互式探索和知识推理</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- 左侧工具栏 -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">知识图谱类型</h3>
                        <div class="space-y-2">
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="graphType" class="form-radio text-blue-500" checked>
                                <span class="ml-2 text-sm">火灾原因图谱</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="graphType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">消防设备图谱</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="graphType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">消防法规图谱</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="graphType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">火灾类型图谱</span>
                            </label>
                            <label class="flex items-center cursor-pointer">
                                <input type="radio" name="graphType" class="form-radio text-blue-500">
                                <span class="ml-2 text-sm">自定义图谱</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">图谱操作</h3>
                        <div class="space-y-2">
                            <button class="w-full flex items-center justify-center px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md">
                                <i class="fas fa-plus-circle mr-1"></i> 新建图谱
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-save mr-1"></i> 保存当前图谱
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-share-alt mr-1"></i> 导出图谱
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-undo mr-1"></i> 重置视图
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="font-medium text-gray-800 mb-3">图谱分析</h3>
                        <div class="space-y-2">
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-route mr-1"></i> 路径分析
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-project-diagram mr-1"></i> 拓扑分析
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-sitemap mr-1"></i> 层次分析
                            </button>
                            <button class="w-full flex items-center justify-center px-3 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-md">
                                <i class="fas fa-chart-network mr-1"></i> 关系挖掘
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧主内容区 -->
                <div class="lg:col-span-3">
                    <!-- 顶部工具栏 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex-1">
                                <div class="relative">
                                    <input type="text" placeholder="搜索实体或关系..." class="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                </div>
                            </div>
                            
                            <div class="flex space-x-2">
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="添加节点">
                                    <i class="fas fa-plus"></i>
                                </button>
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="连接节点">
                                    <i class="fas fa-link"></i>
                                </button>
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="删除选中">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="放大">
                                    <i class="fas fa-search-plus"></i>
                                </button>
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="缩小">
                                    <i class="fas fa-search-minus"></i>
                                </button>
                                <button class="px-3 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" title="全屏">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图谱展示区 -->
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <div id="graphContainer"></div>
                    </div>
                    
                    <!-- 属性面板 -->
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-medium text-gray-800">节点详情</h3>
                            <span class="text-sm text-gray-500">选中节点: 电气火灾</span>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <h4 class="text-sm font-medium text-gray-700 mb-2">基本属性</h4>
                                <div class="bg-gray-50 p-3 rounded-md text-sm">
                                    <div class="grid grid-cols-3 gap-2">
                                        <div class="text-gray-600">类型:</div>
                                        <div class="col-span-2 text-gray-800">火灾类型</div>
                                        
                                        <div class="text-gray-600">名称:</div>
                                        <div class="col-span-2 text-gray-800">电气火灾</div>
                                        
                                        <div class="text-gray-600">ID:</div>
                                        <div class="col-span-2 text-gray-800">TYPE_001</div>
                                        
                                        <div class="text-gray-600">创建时间:</div>
                                        <div class="col-span-2 text-gray-800">2023-03-15</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-sm font-medium text-gray-700 mb-2">关联关系</h4>
                                <div class="bg-gray-50 p-3 rounded-md text-sm">
                                    <div class="space-y-2">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                                            <span>导致 → 短路</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                                            <span>包含 → 线路老化</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
                                            <span>关联 → 电气设备</span>
                                        </div>
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
                                            <span>适用 → 电气火灾防范指南</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="md:col-span-2">
                                <h4 class="text-sm font-medium text-gray-700 mb-2">节点描述</h4>
                                <div class="bg-gray-50 p-3 rounded-md text-sm">
                                    <p>电气火灾是指由于电气设备或电气线路故障引发的火灾。主要原因包括线路短路、过载、接触不良、绝缘老化等。电气火灾通常发展迅速，危害性大，是最常见的火灾类型之一。</p>
                                </div>
                            </div>
                            
                            <div class="md:col-span-2">
                                <h4 class="text-sm font-medium text-gray-700 mb-2">相关资源</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                                    <a href="#" class="flex items-center p-2 bg-gray-50 hover:bg-blue-50 rounded-md">
                                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                                        <span>电气火灾防范指南.pdf</span>
                                    </a>
                                    <a href="#" class="flex items-center p-2 bg-gray-50 hover:bg-blue-50 rounded-md">
                                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                                        <span>电气火灾调查要点.pdf</span>
                                    </a>
                                    <a href="#" class="flex items-center p-2 bg-gray-50 hover:bg-blue-50 rounded-md">
                                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                                        <span>电气线路短路特征分析.pdf</span>
                                    </a>
                                    <a href="#" class="flex items-center p-2 bg-gray-50 hover:bg-blue-50 rounded-md">
                                        <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                                        <span>电气火灾案例集.pdf</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部版权信息 -->
        <footer class="bg-gray-800 text-white py-6 mt-8">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <img src="https://via.placeholder.com/120x40?text=火调知识库" alt="Logo" class="h-10">
                        <p class="mt-2 text-gray-400">© 2023 火灾调查知识库平台 版权所有</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i class="fas fa-envelope text-xl"></i>
                        </a>
                    </div>
                    <div class="mt-4 md:mt-0 text-gray-400">
                        <p>联系电话: 010-12345678</p>
                        <p>邮箱: contact@firekb.com</p>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-700 text-center text-gray-400">
                    <p>消防部门指定火灾调查技术服务平台</p>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Vue应用
        const app = Vue.createApp({
            data() {
                return {
                    // 数据可以在这里定义
                }
            },
            methods: {
                // 方法可以在这里定义
            },
            mounted() {
                this.initGraph();
            },
            methods: {
                initGraph() {
                    // 初始化知识图谱
                    const graphDom = document.getElementById('graphContainer');
                    const myChart = echarts.init(graphDom);
                    
                    // 模拟数据
                    const data = {
                        nodes: [
                            { id: '1', name: '电气火灾', symbolSize: 50, category: 0 },
                            { id: '2', name: '短路', symbolSize: 40, category: 1 },
                            { id: '3', name: '线路老化', symbolSize: 40, category: 1 },
                            { id: '4', name: '电气设备', symbolSize: 40, category: 2 },
                            { id: '5', name: '插座', symbolSize: 30, category: 2 },
                            { id: '6', name: '开关', symbolSize: 30, category: 2 },
                            { id: '7', name: '电线', symbolSize: 30, category: 2 },
                            { id: '8', name: '热点', symbolSize: 30, category: 1 },
                            { id: '9', name: '过载', symbolSize: 40, category: 1 },
                            { id: '10', name: '电气火灾防范指南', symbolSize: 45, category: 3 },
                            { id: '11', name: '接触不良', symbolSize: 40, category: 1 },
                            { id: '12', name: '绝缘损坏', symbolSize: 40, category: 1 },
                        ],
                        links: [
                            { source: '1', target: '2', value: '导致' },
                            { source: '1', target: '3', value: '包含' },
                            { source: '1', target: '4', value: '关联' },
                            { source: '1', target: '10', value: '适用' },
                            { source: '4', target: '5', value: '包括' },
                            { source: '4', target: '6', value: '包括' },
                            { source: '4', target: '7', value: '包括' },
                            { source: '3', target: '12', value: '导致' },
                            { source: '2', target: '8', value: '产生' },
                            { source: '1', target: '9', value: '导致' },
                            { source: '1', target: '11', value: '包含' },
                            { source: '11', target: '8', value: '产生' },
                        ]
                    };
                    
                    const categories = [
                        { name: '火灾类型' },
                        { name: '起因' },
                        { name: '设备' },
                        { name: '文档' }
                    ];
                    
                    const option = {
                        title: {
                            text: '电气火灾知识图谱',
                            subtext: '交互式知识探索',
                            top: 'top',
                            left: 'center'
                        },
                        tooltip: {},
                        legend: {
                            data: categories.map(a => a.name),
                            orient: 'vertical',
                            right: 10,
                            top: 20
                        },
                        animationDuration: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                name: '电气火灾知识图谱',
                                type: 'graph',
                                layout: 'force',
                                data: data.nodes,
                                links: data.links,
                                categories: categories,
                                roam: true,
                                label: {
                                    show: true,
                                    position: 'right'
                                },
                                force: {
                                    repulsion: 200
                                },
                                edgeSymbol: ['circle', 'arrow'],
                                edgeSymbolSize: [4, 10],
                                edgeLabel: {
                                    show: true,
                                    formatter: '{c}',
                                    fontSize: 12
                                },
                                lineStyle: {
                                    opacity: 0.9,
                                    width: 2,
                                    curveness: 0
                                }
                            }
                        ]
                    };

                    myChart.setOption(option);
                    
                    // 响应窗口大小变化
                    window.addEventListener('resize', function() {
                        myChart.resize();
                    });
                }
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 